import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable, {ActionType} from '@ant-design/pro-table';
import {DownOutlined, PlusOutlined} from '@ant-design/icons';
import {Modal, Button, Switch, Dropdown, Menu, message} from 'antd';
import {useRef, useState} from 'react';
import ProForm, {ProFormText} from '@ant-design/pro-form';
import {getCardRecord} from "@/services/ant-design-pro/card";
import '../../content/article.css'


const PayRecord = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const actionRef =  useRef<ActionType>();
  // 弹出模态框
  const alertModel = ()=>{
    setIsModalVisible(true);
  }
  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const columns= [
    {
      title: '订单号',
      dataIndex: 'order_id',
      search:false,
      align:"center"
    },
    {
      title: '用户名',
      dataIndex: 'id',
      align:"center"
    },
    {
      title: '手机号码',
      dataIndex: 'use_day',
      search:false,
      align:"center"
    },
    {
      title: '会员卡类型',
      dataIndex: 'type',
      align:"center",
      valueEnum:{
       'month':{text:'月卡', status: 'Default' },
        'year': { text: '年卡', status: 'Default' },
        'quarter': { text: '季卡', status: 'close' },
        'ever': { text: '永久', status: 'index' },
        'free': { text: '免费', status: 'online' },
        'tryout': { text: '使用', status: 'Process' },
      }
    },
    {
      title: '有效期限(天)',
      dataIndex: 'vip_day',
      initialValue: 'all',
      search:false,
      align:"center"
    },
    {
      title: '支付金额',
      key: 'showTime',
      dataIndex: 'pay_price',
      hideInSearch: true,
      align:"center"
    },
    {
      title: '支付方式',
      dataIndex: 'pay_type',
      align:"center",
      valueEnum:{
        'aliyun':{text:'支付宝', status: 'Default' },
        'wechat': { text: '微信', status: 'Default' },
        'free': { text: '免费', status: 'close' },
      }
    },
    {
      title: '购买时间',
      dataIndex: 'pay_time',
      valueType: 'dateRange',
      align:"center",
    },
    {
      title: '到期时间',
      key: 'showTime',
      dataIndex: 'overdue_time',
      hideInSearch: true,
      align:"center"
    },
  ];
  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params,sorter)=>{
          // console.log(params)
          const {data,meta} = await getCardRecord({...params,...sorter})
          return {
            data,
            success:true,
            total:meta.pagination.total
          }
        }}
        rowKey="id"
        search={ true }
        dateFormatter="string"
        toolBarRender={false}
      />
      <Modal footer={null} title="添加分类" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <ProForm>
          <ProFormText
            name="title"
            label="分类名称"
            placeholder="请输入相关分类！"
            rules={[{required: true, message: '请输入相关分类！'}]}
          />
          <ProFormText
            name="title"
            label="分类简介"
            placeholder="请输入分类简介！"
            rules={[{required: true, message: '请输入分类简介！'}]}
          />
          <ProFormText
            name="title"
            label="分类图片"
            placeholder="请输入相关分类！"
            rules={[{required: true, message: '请输入相关分类！'}]}
          />
          <ProFormText
            name="title"
            label="排序"
            placeholder="请输入相关分类！"
            rules={[{required: true, message: '请输入相关分类！'}]}
          />
          <ProFormText
            name="title"
            label="状态"
            placeholder="请输入相关分类！"
            rules={[{required: true, message: '请输入相关分类！'}]}
          />
        </ProForm>
      </Modal>
    </PageContainer>
  )
}

export default PayRecord;

